<template>
  <div v-loading="loading" style="width:100%;height:100%;overflow:hidden;position:relative;" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <BaseMap v-if="selectMap&&selectMap.mapUrl" ref="baseMap" :map-url="selectMap.mapUrl" :layers="selectMap.layers" :projection="selectMap.projection" :bounds="selectMap.bounds" />
  </div>
</template>
<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Icon from 'ol/style/Icon'
import Point from 'ol/geom/Point'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import { FullScreen, ZoomSlider } from 'ol/control'
import { mapGetters } from 'vuex'
import BaseMap from '@/views/components/BaseMap'
import { Style } from 'ol/style'

export const iconUrl = '/img/map/point.png'

export default {
  components: { BaseMap },
  props: {
    /* eslint-disable-next-line */
    mapId: {
      default: () => { return null }
    },
    /* eslint-disable-next-line */
    gisX: {
      default: () => { return null }
    },
    /* eslint-disable-next-line */
    gisY: {
      default: () => { return null }
    },
    /* eslint-disable-next-line */
    chartObject: {
      default: () => { return null }
    }

  },
  data() {
    return {
      areaLayer: null,
      loading: false,
      selectMap: null,
      pointLayer: null
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  mounted() {
    this.getMineMap()
  },
  methods: {
    getMineMap() {
      this.loading = true
      this.selectMap = this.mapId
      const that = this
      setTimeout(() => {
        that.initMap()
      }, 50)
      this.loading = false
    },
    initMap() {
      if (this.areaLayer != null) {
        this.$refs.baseMap.map.removeLayer(this.areaLayer)
      }
      this.$refs.baseMap.map.addControl(new FullScreen())
      this.$refs.baseMap.map.addControl(new ZoomSlider())
      if (this.gisX && this.gisY) {
        this.addMark([this.gisX, this.gisY])
      }
      const that = this
      this.$refs.baseMap.map.on('click', function(event) {
        const coordinate = event.coordinate// 获取鼠标当前像素点
        that.addMark(coordinate)
        // 返回双击鼠标的像素点
        that.$emit('clickCallback', coordinate)
      })
    },

    // 单击标点
    addMark(coordinate) {
      // 如果已存在标点先清除原有标点
      if (this.pointLayer) {
        this.$refs.baseMap.map.removeLayer(this.pointLayer)
        this.pointLayer = null
      }
      this.pointLayer = this.addPoint(coordinate[0], coordinate[1])
    },

    // 添加标注点到map地图中，return：返回添加的图层
    addPoint(x, y) {
      console.log(x, y)
      // 初始化要素
      const point = new Feature({
        geometry: new Point([x, y])
      })
      const vectorSource = new VectorSource()
      if (x && y) {
        // 设置样式
        point.setStyle(new Style({
          image: new Icon({
            src: iconUrl,
            // 控制位置，左上[0,0]  左下[0,1]  右下[1，1]
            anchor: [0.5, 0.85],
            // 控制大小
            scale: 0.18
          })
        }))
      }
      vectorSource.addFeature(point)
      // 添加标注图层
      const layer = new VectorLayer({
        source: vectorSource
      })
      this.$refs.baseMap.map.addLayer(layer)
      return layer
    }
  }
}
</script>
<style lang="scss">
#map {
  height: 100%;
  width: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>
